<template>
  <view class="container">
    <uv-navbar title="我的" bg-color="transparent" :leftIconSize="0"
      :titleStyle="{color: '#fff','font-size': '36rpx','font-weight':'bold'}"></uv-navbar>
    <view class="my" :style="{paddingTop: `${statusBarHeight+ 44}px`,backgroundImage: `url(${'/static/my/bg.png'})`}">
      <view class="my_main">
        <view class="my_user">
          <view class="my_user_left" @tap="gotoSecond('editProfile')">
            <image class="my_user_image" :src="'/static/my/avatar.jpg'"></image>
            <view>
              <text>小包子</text>
              <view>
                <image src="/static/my/bianji.png" mode=""></image>个人资料
              </view>
            </view>
          </view>
          <image class="my_user_left_btn" src="/static/my/tongzhi.png" mode="" @tap="gotoSecond('sysInform')"></image>
        </view>
        <view class="my_content">
          <view class="my_content_box" @click="gotoUrl('/pages/tabbar/purchased/purchased')">
            <text>0</text>
            <view>已购</view>
          </view>
          <view class="my_content_box" @tap="gotoSecond('coupon')">
            <text>0</text>
            <view>优惠券</view>
          </view>
          <view class="my_content_box" @tap="gotoSecond('collect')">
            <text>0</text>
            <view>我的收藏</view>
          </view>
          <view class="my_content_box" @tap="gotoSecond('account')">
            <text>0</text>
            <view>我的账户</view>
          </view>
        </view>
        <view class="my_vip" @click="gotoSecond('openVip')">
          <view class="my_vip_left">
            知识区超级会员
          </view>
          <button class="my_vip_right">立即开通</button>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="main_title">
        <view class="main_title_box" @tap="gotoSecond('order','type=1')">
          <image src="/static/my/daifukuan.png" mode=""></image>
          <text>待付款</text>
        </view>
        <view class="main_title_box" @tap="gotoSecond('order','type=2')">
          <image src="/static/my/daishouhuo.png" mode=""></image>
          <text>待收货</text>
        </view>
        <view class="main_title_box" @tap="gotoSecond('order','type=3')">
          <image src="/static/my/daipingjia.png" mode=""></image>
          <text>待评价</text>
        </view>
        <view class="main_title_box" @tap="gotoSecond('order','type=0')">
          <image src="/static/my/quanbudingdan.png" mode=""></image>
          <text>全部订单</text>
        </view>
      </view>
      <view class="main_box">
        <view class="main_box_content" @click="gotoUrl('/pages/tabbar/learning/learning')">
          <view class="main_box_content_left">
            <image src="/static/my/xuexizhognxin.png"></image>
            <text>学习中心</text>
          </view>
          <view class="main_box_content_right">
            <view>累计学习<text>5</text>分钟</view>
            <uv-icon name="arrow-right" color="#999999" size="18"></uv-icon>
          </view>
        </view>
        <view class="main_box_content" @tap="gotoSecond('extend')">
          <view class="main_box_content_left">
            <image src="/static/my/tuiguangzhongxin.png"></image>
            <text>推广中心</text>
          </view>
          <view class="main_box_content_right">
            <uv-icon name="arrow-right" color="#999999" size="18"></uv-icon>
          </view>
        </view>
        <view class="main_box_content">
          <view class="main_box_content_left">
            <image src="/static/my/wodehuodong.png"></image>
            <text>我的活动</text>
          </view>
          <view class="main_box_content_right">
            <uv-icon name="arrow-right" color="#999999" size="18"></uv-icon>
          </view>
        </view>
        <view class="main_box_content" @click="gotoSecond('giftRecord')">
          <view class="main_box_content_left">
            <image src="/static/my/zengsongjilu.png"></image>
            <text>赠送记录</text>
          </view>
          <view class="main_box_content_right">
            <uv-icon name="arrow-right" color="#999999" size="18"></uv-icon>
          </view>
        </view>
        <view class="main_box_content" @click="gotoSecond('myAddress')">
          <view class="main_box_content_left">
            <image src="/static/my/shouhuodizhi.png"></image>
            <text>收货地址</text>
          </view>
          <view class="main_box_content_right">
            <uv-icon name="arrow-right" color="#999999" size="18"></uv-icon>
          </view>
        </view>
      </view>
    
    </view>
    <ys-tabbar :value="4" />
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue';


  const statusBarHeight = ref()
  const gotoUrl = (url : string) => {
    console.log(url)
    uni.navigateTo({
      url
    })
  }
  const gotoSecond = (url : string, query?: string) => {
    uni.navigateTo({
      url: `/pages/mySecondary/${url}/${url}?${query? query: ''}`
    })
  }
  onLoad(async () => {
    uni.getSystemInfo({
      success: (res) => {
        console.log(res)
        statusBarHeight.value = res.statusBarHeight
      }
    });
  })
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 750rpx;

    .my {
      width: 750rpx;
      height: auto;
      position: relative;
      background-size: 100% 100%;
      color: #fff;

      &_main {
        width: 750rpx;
        height: auto;
        color: #fff;
        padding: 20rpx 30rpx 40rpx;
        box-sizing: border-box;
      }

      &_user {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &_left {
          display: flex;
          align-items: center;
          flex: 1;
          font-weight: bold;
          font-size: 30rpx;
          color: #FFFFFF;

          .my_user_image {
            margin-right: 12rpx;
            width: 124rpx;
            height: 124rpx;
            background: #969696;
            border-radius: 50%;
            border: 1px solid #E4E4E4;
          }

          >view {
            font-weight: bold;
            font-size: 30rpx;
            color: #FFFFFF;

            >view {
              font-weight: bold;
              font-size: 24rpx;
              display: flex;
              align-items: center;
              margin-top: 20rpx;

              image {
                width: 48rpx;
                height: 48rpx;
              }
            }
          }

          &_btn {
            width: 48rpx;
            height: 48rpx;

            &:active {
              transform: translateY(2px);
            }
          }
        }
      }


      &_content {
        display: flex;
        justify-content: space-between;
        margin-top: 50rpx;

        &_box {
          text-align: center;
          font-weight: bold;
          font-size: 36rpx;
          color: #FFFFFF;

          view {
            font-weight: 400;
            font-size: 24rpx;
            color: #FFFFFF;
            margin-top: 5rpx;
          }
        }
      }

      &_vip {
        width: 690rpx;
        height: 113rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx 0 100rpx;
        background-image: url('/static/my/vip.png');
        background-size: 100% 100%;
        box-sizing: border-box;
        margin-top: 35rpx;

        &_right {
          width: 160rpx;
          height: 60rpx;
          background: linear-gradient(0deg, #FFB438 0%, #FFD02E 100%);
          border-radius: 30rpx;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          white-space: nowrap;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0;
          padding: 0;
        }
      }

    }

    .main {
      width: 750rpx;
      height: 844rpx;
      position: relative;
      margin-top: -11px;
      background: #F4F4F4;
      border-radius: 30rpx 30rpx 0rpx 0rpx;
      padding: 0 30rpx 30rpx;
      box-sizing: border-box;

      &_title {
        margin: 30rpx 0;
        background-color: #fff;
        width: 690rpx;
        height: 160rpx;
        border-radius: 10rpx;
        display: flex;

        &_box {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          image {
            width: 48rpx;
            height: 48rpx;
            margin-bottom: 20rpx;
          }

          font-weight: 500;
          font-size: 24rpx;
          color: #666666;
        }
      }

      &_box {
        width: 690rpx;
        height: 501rpx;
        background: #FFFFFF;
        border-radius: 10rpx;

        &_content {
          height: 100rpx;
          border-bottom: 1rpx solid rgba(#000, .1);
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20rpx;

          &_left {
            display: flex;
            align-items: center;

            image {
              width: 40rpx;
              height: 40rpx;
              margin-right: 15rpx;
            }

            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          &_right {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #333333;

            >view {
              text {
                color: #218CFE;
                margin: 0 2rpx;
              }

              margin-right: 10rpx;
            }
          }

          &:active {
            background-color: #fafafa;
          }

          &:last-child {
            border-bottom: 0;
          }
        }

      }
    }
  }
</style>